<%@page import="com.kcs.fxmargin.servlet.ContextListener"%>
<%@page contentType="text/html; charset=UTF-8" language="java" %>
<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-html"  prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean"  prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://displaytag.sf.net" 			 prefix="display" %>
<%@page import="com.kcs.common.utils.commonUtils"%>
<%@page import="com.kcs.common.utils.PropsUtils"%>
<%@page import="com.kcs.common.utils.Constant"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>FX Margin Pre-Order</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jsp/script/jquery/plugin/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="jsp/script/jquery/plugin/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="jsp/script/jquery/plugin/fancybox/jquery.fancybox-1.3.4.pack.js"></script>   
<script type="text/javascript" src="jsp/script/jsDatePick.full.1.3.js"></script>   	
<script type="text/javascript" src="jsp/script/common.js"></script>  
<link rel="stylesheet" type="text/css" href="jsp/script/jquery/plugin/fancybox/jquery.fancybox-1.3.4.css"/>
<link rel="stylesheet" type="text/css" href="jsp/css/table.css"/>
<link rel="stylesheet" type="text/css" href="jsp/css/jsDatePick_ltr.css" />
<link rel="stylesheet" type="text/css" href="jsp/css/fxmarginStyle.css"/>
<script type="text/javascript">

	var g_data;
	var g_reset_case;

	$(document).ready(function() {
		jQuery("#action").val("init");
	});

	function saveFunction(){

		var id			= jQuery("#id").val();
    	var custInfoId 	= jQuery("#custInfoId").val();
    	var cifNo		= jQuery("#cifNo").val();
    	var orderNo 	= jQuery("#orderNo").val();
    	var amount	  	= jQuery("#amount").val();
    	var ccy1 		= jQuery("#ccy1").val();
    	var ccy2 		= jQuery("#ccy2").val();
    	var exchRate 	= jQuery("#exchRate").val();
    	var updateDate 	= jQuery("#updateDate").val();
    	var updateBy	= jQuery("#updateBy").val();
		var rowVersion	= jQuery("#rowVersion").val();
    	
		if(validate()) {
			loading();
			jQuery.post("/FxMargin/PreOrderServlet",{
				"id"			: id,
				"custInfoId"	: custInfoId,
				"cifNo"			: cifNo,
				"orderNo"	  	: orderNo,
				"ccy1"			: ccy1,
				"ccy2"			: ccy2,
				"amount"		: removeCommas(amount),
				"exchRate"		: removeCommas(exchRate),
				"updateDate"	: updateDate,
				"updateBy"		: updateBy,
				"rowVersion"	: rowVersion,
				"action"		: "insert"
				},
				function(data){
					unloading();
					if(data != null && data.data == "s"){
						alert(m_save_success);
						search();
					} else if(data.data == "to"){
						unloading();
						alert("Session time out!");
					} else{
						alert(m_save_fail);
					}
					$.fancybox.close();
					},"json").error(
				function(){
					unloading();
					alert("Ajax error");
				}
			);		
		}
	}

	function updateFunction(){

		var id			= jQuery("#id").val();
    	var custInfoId 	= jQuery("#custInfoId").val();
    	var cifNo		= jQuery("#cifNo").val();
    	var orderNo 	= jQuery("#orderNo").val();
    	var amount	  	= jQuery("#amount").val();
    	var ccy1 		= jQuery("#ccy1").val();
    	var ccy2 		= jQuery("#ccy2").val();
    	var exchRate 	= jQuery("#exchRate").val();
    	var updateDate 	= jQuery("#updateDate").val();
    	var updateBy	= jQuery("#updateBy").val();
		var rowVersion	= jQuery("#rowVersion").val();
    	
		if(validate()){	
			loading();
			jQuery.post("/FxMargin/PreOrderServlet",{
				"id"			: id,
				"custInfoId"	: custInfoId,
				"cifNo"			: cifNo,
				"orderNo"	  	: orderNo,
				"ccy1"			: ccy1,
				"ccy2"			: ccy2,
				"amount"		: removeCommas(amount),
				"exchRate"		: removeCommas(exchRate),
				"updateDate"	: updateDate,
				"updateBy"		: updateBy,
				"rowVersion"	: rowVersion,
				"action"		: "update"
				},
				function(data){
					if(data != null && data.data == "s"){
						unloading();
						alert(m_save_success);
						search();
					} else if(data.data == "to"){
						unloading();
						alert("Session time out!");
					} else{
						unloading();
						alert(m_save_fail);
					}
					$.fancybox.close();
					},"json").error(
				function(){
					unloading();
					alert("Ajax error");
				}
			);	
		}	
	}
			
	function resetFunction(){
		loading();
		jQuery("#action").val("init");
		submitform();
	}
	
	function search(){
		loading();
		jQuery("#action").val("search");
		submitform();
	}

	function deleteFunction(id){
		var del = confirm(m_do_delete);

		if(del == true){
			jQuery("#deleteId").val(id);
			jQuery("#action").val("delete");
			submitform();
		}		
	}
	
	function changeSettleAmount(value, amount, index){
	
		if(value > amount){
			jQuery("#settleAmount" + index).val(0);
			jQuery("#settleRemain" + index).val(0);
		} else {
			jQuery("#settleRemain" + index).val(amount - value);
		}
	}
	var g_case;

	function this_openCustomer(i_case){
		g_case = i_case;
		openPopupCustomer();
	}

	// for popup customer //
	function onPopup(id, src, width, height){
		g_datacustomer = null;
		jQuery("#" + id + "_iframe").html("");
		src = "http://" + window.location.host + "/FxMargin/" + src + ".do?pAction=init";
		var html = "<center><iframe src='" + src +"' height='" + height +"px' width='" + width + "px' id='myIframe'></iframe></center>";

		jQuery("#" + id + "_iframe").html(html);

		openPopup(id);
		
	}
	
	function onCustomer(){
		/*	global variable 'g_datacustomer' is use	*/
 		if(g_datacustomer != null){
 			jQuery("#custInfoId").val(g_datacustomer.id);
 	 	 	jQuery("#cifNo").val(g_datacustomer.cifNo);
 	 		jQuery("#customerName").val(g_datacustomer.customerName);	

 	 		openPopup("fancyPopup",function(){
				jQuery("#cifNo").focus();
				jQuery("#customerName").focus();
			});
 	 	}
	}
	
	function offCustomer(){
		openPopup("fancyPopup");
		
	}
	
	function select(data){
		g_datacustomer = data;
	}
	// for popup customer //
	
	function openSavePopup(){
		jQuery("#glass").show();
		jQuery("#saveDiv").show();
		jQuery("#updateDiv").hide();
		g_reset_case = "save";
		resetPopupFunction();
		
		openPopup("fancyPopup",function(){});
    
	}

	function openUpdatePopup(data){
		jQuery("#glass").hide();
		jQuery("#saveDiv").hide();
		jQuery("#updateDiv").show();
		g_data 			= data;
		g_reset_case 	= "update";
		resetPopupFunction();
		
		openPopup("fancyPopup",function(){});
	}

	function validate(){
		var custInfoId 	= jQuery("#custInfoId").val();
		var amount 		= jQuery("#amount").val();
		var ccy1 		= jQuery("#ccy1").val();
		var ccy2 		= jQuery("#ccy2").val();
		var exchRate 	= jQuery("#exchRate").val();

		if(custInfoId 	== "") {alert(m_please_fill_data + " Customer"); 	return false;}
		if(amount 		== "") {alert(m_please_fill_data + " Amount"); 		return false;}
		if(ccy1 		== "") {alert(m_please_fill_data + " CCY1"); 		return false;}
		if(ccy2 		== "") {alert(m_please_fill_data + " CCY2"); 		return false;}
		if(exchRate 	== "") {alert(m_please_fill_data + " FX Rate"); 	return false;}

		return true;
	}

	function resetPopupFunction(){
		jQuery("#ccy2").attr('disabled','disabled');
		if(g_reset_case == "save") {
			jQuery("#custInfoId").val("");
			jQuery("#cifNo").val("");
			jQuery("#customerName").val("");
			jQuery("#orderNo").val("");
			jQuery("#amount").val("");
			jQuery("#ccy1").val("");
			jQuery("#ccy2").val("THB");
			jQuery("#exchRate").val("");
			jQuery("#updateDate").val(getCurrentDate());
			jQuery("#updateBy").val(jQuery("#userLoginName").val());
		} else if (g_reset_case == "update") {
			data = g_data;
			jQuery("#id").val(data.id);
			jQuery("#custInfoId").val(data.custInfoId);
			jQuery("#cifNo").val(data.cifNo);
			jQuery("#customerName").val(data.customerName);
			jQuery("#orderNo").val(data.orderNo);
			jQuery("#amount").val(addCommas(data.amount));
			jQuery("#ccy1").val(data.ccy1);
			jQuery("#ccy2").val(data.ccy2);
			jQuery("#exchRate").val(addCommas(data.fxRate));
			jQuery("#updateDate").val(data.date);
			jQuery("#updateBy").val(data.updateByFullName);
			jQuery("#rowVersion").val(data.rowVersion);
		}
		
	}	

	function doNumber(value, id, decimal, maxvalue){ 
		var result = removeCommas(value); 
		if(result == "." || result == "" ) result = 0; 
		result = parseFloat(result);

		if(result > maxvalue) result = maxvalue;
		
		jQuery("#" + id).val(addCommas(result.toFixed(decimal)));
	}
</script>
</head>
<body>

<%@ include	file="include/headerMenu.jsp"%>

<center>
<div style="width:95%" align="center">
	<html:form action="/FxMarginPreOrderAction.do">
		<html:hidden property="action" styleId="action"/>
		<html:hidden property="deleteId" styleId="deleteId"/>
		
		<table width="100%" class="MarginHeader">
			<tr>
				<td align="left">FX Margin Pre-Order</td>
			</tr>
		</table>
		
		<div class="CriteriaBox">
			<table width="100%" class="MarginCriteria">
				<tr>
					<td align="right">CIF No. :</td>
					<td align="left" >
						<html:text property="cifNo"></html:text>
					</td>
					<td align="right">Customer Name :</td>
					<td align="left" valign="middle" >
						<html:text property="customerName"></html:text>
					</td>
				</tr>
			</table>
			
			<table width="100%" class="MarginCriteria">
				<tr>
					<td width="100%" align="center">
						<input type="button" class="button" value="Search" onclick="search();"/>
						&nbsp;&nbsp;
						<input type="button" class="button" value="Reset" onclick="resetFunction();"/>
						&nbsp;&nbsp;
						<input type="button" class="button" value="New" onclick="openSavePopup();"/>
					</td>
				</tr>
			</table>
		</div>
		
		<logic:present name="<%=Constant.SHOW_RESULT%>">
			<div class="MarginTable">
				<display:table id="data" name="sessionScope.FxMarginPreOrderActionForm.preOrderList" requestURI="/FxMarginPreOrderAction.do" pagesize="10" >
					
					<display:column property="rowNum"			title="No" 					sortable="false" class="center"/>
					<display:column property="cifNo"   			title="CIF No."   			sortable="false" class="center"/>
					<display:column property="customerName"   	title="Customer Name"   	sortable="false" class="left"/>
					<display:column property="amount" 			title="Sum Amount (THB)" 	sortable="false" class="right" format="{0,number,#,##0.00}"/>				
					<display:column property="ccy1" 			title="CCY1" 				sortable="false" class="center"/>		
					<display:column property="ccy2"				title="CCY2" 				sortable="false" class="center"/>		
					<display:column property="fxRate" 			title="FX Rate" 			sortable="false" class="right" format="{0,number,#,##0.000000}"/>		
					<display:column property="date" 			title="Update Date" 		sortable="false" class="center"/>
					<display:column property="updateByFullName" title="Update By" 			sortable="false" class="center"/>
					<display:column title="Edit" sortable="false" class="center">
						<img src="jsp/images/edit.png" alt="Edit" style="width:30px;cursor:pointer;" onclick="openUpdatePopup({${data.jsonObject}});"/>
					</display:column>
					<display:column title="Delete" sortable="false" class="center">
						<img src="jsp/images/delete.png" alt="Delete" style="width:30px;cursor:pointer;" onclick="deleteFunction('${data.id}');"/>
					</display:column>
				</display:table>
			</div>
		</logic:present>
		
		<div style="display:none">
	        <div id="fancyPopup" style="width:500px">
	        	<input type="hidden" id="id" value=""/>
	        	<input type="hidden" id="rowVersion" value="0"/>
	            <table width="100%" class="MarginHeader">
					<tr>
						<td colspan="2" align="left">FX Margin Pre-Order</td>
					</tr>
				</table>
				<div class="CriteriaBox">
					<table width="100%" class="MarginCriteria">
						<tr>
							<td width="25%" align="left">CIF NO. </td>
							<td width="25%" align="left" >
								<input type="hidden" id="custInfoId" value="" />
								<input type="text" id="cifNo" readonly="readonly" class="disabled"/>
								<img src="jsp/images/btn/glass_search.gif" style="width:30px;cursor:pointer;" onclick="onPopup('popupCustomer','PopupCustomerAction',700,540);" id="glass"/>
							</td>
						</tr>
						<tr>
							<td width="25%" align="left">Customer Name </td>
							<td width="25%" align="left" >
								<input type="text" id="customerName" readonly="readonly" class="disabled"/>
							</td>
						</tr>
					</table>
				</div>
				
				<table width="100%" class="MarginTable">
					<tr>
						<td width="50%" align="left">Pre-order No. </td>
						<td width="50%" align="left" ><input type="text" id="orderNo" maxlength="9" readonly="readonly" class="disabled"/></td>
					</tr>
					<tr>
						<td width="50%" align="left"><font color="red">* </font>Sum Amount (THB) </td>
						<td width="50%" align="left" ><input type="text" id="amount" onchange="doNumber(this.value,'amount', 2, 9999999999999.99);" onkeypress="return isFloat(event, this.value)"/></td>
					</tr>
					<tr>
						<td width="50%" align="left"><font color="red">* </font>CCY1 </td>
						<td width="50%" align="left" >
							<html:select styleId="ccy1" property="ccy1">
								<html:option value="">All</html:option>
								<html:optionsCollection name="FxMarginPreOrderActionForm" property="ccy1List" label="name" value="code" />
							</html:select>
						</td>
					</tr>
					<tr>
						<td width="50%" align="left"><font color="red">* </font>CCY2 </td>
						<td width="50%" align="left" >
							<html:select styleId="ccy2" property="ccy2">
								<html:option value="">All</html:option>
								<html:optionsCollection name="FxMarginPreOrderActionForm" property="ccy2List" label="name" value="code" />
							</html:select>
						</td>
					</tr>
					<tr>
						<td width="50%" align="left"><font color="red">* </font>FX Rate </td>
						<td width="50%" align="left" ><input type="text" id="exchRate" onchange="doNumber(this.value, 'exchRate', 6, 999.999999)" onkeypress="return isFloat(event, this.value)"/></td>
					</tr>
					<tr>
						<td width="50%" align="left">Update date </td>
						<td width="50%" align="left" ><input type="text" id="updateDate" readonly="readonly" class="disabled"/></td>
					</tr>
					<tr>
						<td width="50%" align="left">Update By </td>
						<td width="50%" align="left" ><input type="text" id="updateBy" readonly="readonly" class="disabled"/></td>
					</tr>	
				</table>
				<table width="100%" class="MarginCriteria">
					<tr>
						<td width="100%" align="center">
							<span id="saveDiv"><input type="button" class="button" value="save" id="save" onclick="saveFunction();"/></span>
							<span id="updateDiv"><input type="button" class="button" value="save" id="update" onclick="updateFunction();"/></span>
							&nbsp;&nbsp;
							<input type="button" class="button" value="reset" onclick="resetPopupFunction();"/>
							&nbsp;&nbsp;
							<input type="button" class="button" value="close" onclick="$.fancybox.close();"/>
						</td>
					</tr>
				</table>
	            
	        </div>
	    </div>
	    
	    <div style="display:none">
	        <div id="popupCustomer" style="width:710px;height: 600px">
	        	<div id="popupCustomer_iframe"></div>
				<table width="100%">
					<tr>
						<td width="33%" align="center">
							<input type="button" value="Ok" class="button" onclick="onCustomer();"/>
						</td>
						<td width="34%" align="center">
							<input type="button" value="Close" class="button" onclick="offCustomer();"/>
						</td>
					</tr>
				</table>
	        </div>
	    </div>

		<%@ include	file="include/footer.jsp"%> 
		<%@ include	file="include/message.jsp"%> 
		
	</html:form>	
	
</div>
</center>

</body>
</html>